<script>
import request from '@/utils/request'
import WrapTable from '@/components/WrapTable'
import ButtonList from '@/components/ButtonList'
import { commonMixin } from '@/mixins/common'

export default {
  name: 'variables',
  mixins: [commonMixin],
  tag: 'noKeepalive',
  components: {
    WrapTable,
    ButtonList
  },
  data() {
    return {
      data: [],
      className: 'variables',
      errorMessage: '查看变量信息失败！',
      url: '/v1/activiti/procinstance/findVariables',
      columns: [
        {
          prop: 'key',
          label: '变量名称',
          sortable: true,
          width: '140',
          'show-overflow-tooltip': true,
          'header-align': 'center'
        },
        {
          prop: 'value',
          label: '变量值',
          sortable: true,
          'min-width': '140',
          'header-align': 'center'
        }
      ],
      btnList: [
        {
          label: '关闭',
          methods: 'handleCancel',
          icon: 'el-icon-circle-close-outline',
          disabled: false
        }
      ]
    }
  },
  computed: {
    processInstanceId() {
      return this.$route.params['processInstanceId']
    }
  },
  created() {
    this.getData()
  },
  methods: {
    handleCancel() {
      this.$router.push({
        path: '/activiti/procinstance'
      })
    },
    getData() {
      request({
        url: this.url,
        method: 'get',
        params: {
          processInstanceId: this.processInstanceId
        }
      }).then(({ success, data }) => {
        if (success) {
          this.data = data
        } else {
          this.$message({
            type: 'error',
            message: this.errorMessage
          })
        }
      })
    }
  },
  // eslint-disable-next-line
  render(h) {
    return (
      <div class={this.className}>
        <WrapTable
          ref='table'
          data={this.data}
          fields={this.columns}
          indexCol={false}
          selectionCol={false}
          pagination={false}
          tooltip-effect='dark'
          border
          stripe></WrapTable>
        <ButtonList operateBtnList={this.btnList}></ButtonList>
      </div>
    )
  }
}
</script>

<style lang="scss">
.variables {
  box-sizing: border-box;
  padding: 10px 40px 0;
  .c-button-list {
    margin-top: 20px;
    justify-content: flex-end;
  }
}
</style>
